<!-- @author zhengjie -->
<template>
  <div>


    <!-- 侧边导航++++++++++++++++++++++ -->

    <el-menu :router=true :default-active="defaultActive" class="elmenu" background-color="#fff" text-color="#000"
      active-text-color="#fff">

      <el-menu-item index="/mine/myCenter" class="item_nav" style="margin-top: 60px;">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/home.png" />
          <span>学习记录</span>
        </template>
      </el-menu-item>




      <el-menu-item index="/mine/collect" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/sc.png" />
          <span>我的收藏</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/mine/attention" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/gz.png" />
          <span>我的关注</span>
        </template>
      </el-menu-item>

     <el-menu-item index="/attestation/index" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/jlrz.png" />
          <span>技能认证</span>
        </template>
      </el-menu-item>

     <el-menu-item index="/job/list" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/xyjy.png" />
          <span>学员就业</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/mine/accountSetting" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/zhsz.png" />
          <span>账号设置</span>
        </template>
      </el-menu-item>



      <!--   <el-submenu index="1" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/htgl.png" />
          <span>后台管理</span>
        </template>
        <el-menu-item index="/mine/databaseCon">申请测试</el-menu-item>
        <el-menu-item index="/mine/officialList">版本列表</el-menu-item>
      </el-submenu>

      <el-submenu index="2" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/sj.png" />
          <span>数据管理</span>
        </template>
        <el-menu-item index="/mine/myCenter">数据分析</el-menu-item>
        <el-menu-item index="/mine/playerRechargeRecord">充值记录</el-menu-item>
        <el-menu-item index="/mine/settlementInformation">我的结算</el-menu-item>
      </el-submenu>

      <el-submenu index="3" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/jszc.png" />
          <span>技术支持</span>
        </template>
        <el-menu-item index="">使用手册</el-menu-item>
        <el-menu-item index="/mine/workSub">工单提交</el-menu-item>
      </el-submenu>

      <el-submenu index="4" class="item_nav">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/sz.png" />
          <span>设置</span>
        </template>
        <el-menu-item index="/mine/personalm">账号信息</el-menu-item>
        <el-menu-item index="/mine/PersonalCertificate">个人认证</el-menu-item>
      </el-submenu>

      <el-menu-item class="item_nav" @click="logout">
        <template slot="title" >
          <img  style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/tc.png" />
          <span >退出</span>
        </template>
      </el-menu-item> -->

    </el-menu>




    <!-- 侧边导航=============== -->
  </div>
</template>

<script>
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth';
  export default {
    name: 'Sidebar',
    props: {
      defaultActive: {
        type: String,
        default: '/mine/myCenter'
      }
    },
    data() {
      return {
        game_id: '',
        game_name: '',
        game_logo: ''
      };
    },
    created() {
      this.game_id = localStorage.getItem('game_id');
      this.game_name = localStorage.getItem('game_name');
      this.game_logo = localStorage.getItem('game_logo');
    },
    methods: {}
  };
</script>



<style lang="scss" scoped>
  .elmenu {

    height: 100vh;
    width: 100%;

  }

  .jt {
    position: relative;
    width: 300px;
    height: 60px;
    background-color: #000;
    color: #fff;

  }

  .jt::after {
    content: '';
    position: absolute;
    right: -10px;
    z-index: 1000;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid red;



  }

  ::v-deep .el-submenu__title {
    font-size: 18px;
  }

  ::v-deep .el-menu-item.is-active {
    background: #779efe !important;
  }

  ::v-deep .el-menu-item * {
    font-size: 18px;
  }

  ::v-deep .el-menu-item.is-active {
    background: #779efe !important;

    position: relative;

    width: 300px;
    height: 56px;
    background-color: #000;
    color: #fff;
  }

  ::v-deep .el-menu-item.is-active::after {
    content: '';
    position: absolute;
    right: -28px;
    z-index: 1000;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 28px solid #779efe;

  }


  ::v-deep .el-menu .el-menu-item:hover {
    color: #fff !important;
    background: #10121a !important;
  }



  ::v-deep .el-menu .el-menu-item.is-active {
    color: #fff !important;
    background:#red !important;



  }

  .el-submenu ::v-deep .el-submenu__title:hover {
    color: #fff !important;
    background: #000 !important;


  }

  .logon {
    margin-top: 50px;
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 50%;
    margin-left: 60px;
  }

  ::v-deep .el-menu .el-menu-item:hover {
    color: #fff !important;
    background: #d5e1ed !important;
  }
</style>
